<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/dl_reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/dl_detail.css"/>
		<!--<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>-->
		
		<title>菜品详情</title>
	</head>
	<style type="text/css">
	  /*矢量图标样式*/
		@font-face {font-family: "iconfont";
		  src: url('iconfont.eot?t=1468828242'); /* IE9*/
		  src: url('iconfont.eot?t=1468828242#iefix') format('embedded-opentype'), /* IE6-IE8 */
		  url('iconfont.woff?t=1468828242') format('woff'), /* chrome, firefox */
		  url('iconfont.ttf?t=1468828242') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
		  url('iconfont.svg?t=1468828242#iconfont') format('svg'); /* iOS 4.1- */
		}
		
		.iconfont {
		  font-family:"iconfont" !important;
		  font-size:.6rem;
		  font-style:normal;
		  -webkit-font-smoothing: antialiased;
		  -webkit-text-stroke-width: 0.2px;
		  -moz-osx-font-smoothing: grayscale;
		}
	</style>
	<body>
		<nav class="clearfix">
			<a href="###" class="iconfont">&#xf007a;</a>
			<!--<i class="iconfont">&#xf007a;</i>-->
			<p>菜品详情</p>
		</nav>
		<!--菜单部分-->
		<header>
			<img src="img/1-1.png"/>
			<div class="info clearfix">
				<div class="left">
					<p>香煎杏鲍菇</p>
					<p>酱香口味 5分钟</p>		
					<div class="lable">
						菜单
					</div>
				</div>
				<div class="right">
				<p> <i class="iconfont">&#xe67f;</i>
					<i class="iconfont">&#xe67f;</i>
					<i class="iconfont">&#xe67f;</i>
					<i class="iconfont">&#xe67f;</i>
					<i class="iconfont">&#xe67f;</i>
				</p>
				<p><span id="num">
					300
				</span>人浏览</p>
				</div>
				
			</div>
		</header>
		<!--主体部分-->
		<div class="content">
			<section class="clearfix">
				<div>
					<p>香葱</p>
					<img src="img/2-1.png"/>
				</div>
				<div>
					<p>香葱</p>
					<img src="img/2-1.png"/>
				</div>
				<div>
					<p>香葱</p>
					<img src="img/2-1.png"/>
				</div>
			</section>	
			<div class="step clearfix">
				<div class="tables">
					<div class="table1">
						<div class="lable">
							攻略
						</div>
					</div>
					<div class="table2">
						主料
					</div>
					<div class="table3 clearfix">
						<div>香葱(2个)</div>
						<div>香葱(2个)</div>
					</div>
					<div class="table2">
						辅料
					</div>
					<div class="table3 clearfix">
						<div>香葱(2个)</div>
						<div>香葱(2个)</div>
					</div>
					<div class="table3 clearfix tablex">
						<div>香葱(2个)</div>
						<div>香葱(2个)</div>
					</div>
				</div>
				
			</div>
			<div class="steps clearfix">
				<img src="img/1-1.png" alt="" />
				<div>
					<h5>步骤一</h5>
					<p>杏鲍菇洗净,拭干水分,切片</p>
				</div>
			</div>
			<div class="steps clearfix">
				<img src="img/1-1.png" alt="" />
				<div>
					<h5>步骤一</h5>
					<p>杏鲍菇洗净,拭干水分,切片</p>
				</div>
			</div>
			<div class="steps clearfix">
				<img src="img/1-1.png" alt="" />
				<div>
					<h5>步骤一</h5>
					<p>杏鲍菇洗净,拭干水分,切片</p>
				</div>
			</div>
			<div class="steps clearfix">
				<img src="img/1-1.png" alt="" />
				<div>
					<h5>步骤一</h5>
					<p>杏鲍菇洗净,拭干水分,切片</p>
				</div>
			</div>
			<div class="steps clearfix">
				<img src="img/1-1.png" alt="" />
				<div>
					<h5>步骤一</h5>
					<p>杏鲍菇洗净,拭干水分,切片</p>
				</div>
			</div>
			<div class="steps clearfix">
				<img src="img/1-1.png" alt="" />
				<div>
					<h5>步骤一</h5>
					<p>杏鲍菇洗净,拭干水分,切片</p>
				</div>
			</div>
			<div class="steps clearfix">
				<img src="img/1-1.png" alt="" />
				<div>
					<h5>步骤一</h5>
					<p>杏鲍菇洗净,拭干水分,切片</p>
				</div>
			</div>
			<div class="steps clearfix">
				<img src="img/1-1.png" alt="" />
				<div>
					<h5>步骤一</h5>
					<p>杏鲍菇洗净,拭干水分,切片,尽量厚薄均匀;再切点葱花</p>
				</div>
			</div>
		</div>
		<footer>
			<div class="shoppingCar clearfix">
				<div>加入购物车</div>
				<div>立即购买</div>
			</div>
		</footer>
		<script type="text/javascript">
			!function(){
				var width=document.documentElement.clientWidth;
				var head=document.getElementsByTagName('head')[0];
				var style=document.createElement('style');
				style.innerHTML='html{font-size:'+width/10+'px;}';
				head.appendChild(style);
			}()
		</script>
	</body>
</html>
